<template>
  <view class="headImgSet">
    <custom-navi :show-home="false">修改门店头像</custom-navi>
    <view class="title">店铺头像</view>
    <view class="box" @tap="handlerImg" v-if="!headImg">
      <image src="/static/xj.png" class="box-image" mode="widthFix"></image>
      <view class="box-upload">上传店铺头像</view>
    </view>
    <view class="box-img" @tap="handlerImg" v-if="headImg">
      <image :src="headImg" class="box-img-image"></image>
      <image src="/static/close.png" class="close" mode="widthFix" @tap.stop="handleClose"></image>
    </view>
	<image-cropper :src="cj" @confirm="confirm" @cancel="cancel"></image-cropper>
    <view class="txt">经营品类与店铺头像需互相匹配，请上传适合当前品类的头像。</view>
    <uni-popup ref="popup" type="center">
      <view class="close-box">
        <view class="close-box-title">要删除这张照片吗?</view>
        <view class="close-box-btn">
          <view @tap="handlePopClose">取消</view>
          <view @tap="handlePopDelete">删除</view>
        </view>
      </view>
    </uni-popup>
    <view class="btn">
      <button @tap='handleSave'>保存</button>
    </view>
  </view>
</template>

<script>
import CONSTS from '@/src/consts';
import ImageCropper from "../../components/invinbg-image-cropper/invinbg-image-cropper.vue";
import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
import {updateStoreInformationAvatar} from '../../api'
export default {
  data () {
    return {
		    basic:CONSTS.BASE_URL+'/basic',
			cj:'',
			headImg: '',
			shopInfo:{},
			headPath:''
    };
  },
	components: { uniPopup,ImageCropper },
	onLoad(){
		const _self = this
    uni.getStorage({
      key: 'shopInfo',
      success: function (res) {
        _self.shopInfo = res.data
		_self.headImg=_self.basic+_self.shopInfo.defaultHead
      }
    });
	},
  methods: {
	  confirm(e) {
	     this.cj = ''
		  const _self=this
		  uni.uploadFile({
		    url:CONSTS.BASE_URL+'/basic/upload/single/store',
		    // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
		    filePath:e.detail.tempFilePath,
		    name: 'file',
		    formData: {
		      'user': 'test'
		    },
		    success: (uploadFileRes) => {
		      const res = JSON.parse(uploadFileRes.data)
		      _self.headImg =CONSTS.BASE_URL+'/basic' + res.data
		  			  _self.headPath= res.data
		    }
		  });
	  },
	  cancel() {
	      console.log('canceled')
	  },
    handlePopDelete () {
      this.headImg = ''
      this.$refs.popup.close();
    },
    handlePopClose () {
      this.$refs.popup.close();
    },

    handleClose () {
      this.$refs.popup.open()
		},
	
		async handleSave() {
			if(!this.headImg){
				 return this.$utils.common.toast.fail("未上传图片");
			}
     const params={
			 id:this.shopInfo.id,
			 defaultHead :this.headPath
		 }
      try {
        const { data } = await updateStoreInformationAvatar(params)
        this.$utils.common.toast.fail("修改成功");
       setTimeout(() => {
        this.$utils.common.navigateBack()
       }, 1000)
      } catch (err) {
        if (err.code) {
          if (err.code !== 200) {
            return this.$utils.common.toast.fail(err.data.message);
          }
          return this.$utils.common.toast.fail(err.errMsg);
        }
      }
    },
    handlerImg () {
      const _self = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url:CONSTS.BASE_URL+'/basic/upload/single/store',
            // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              'user': 'test'
            },
            success: (uploadFileRes) => {
              const res = JSON.parse(uploadFileRes.data)
              _self.headImg =CONSTS.BASE_URL+'/basic' + res.data
			  _self.cj=_self.headImg
			  _self.headPath= res.data
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.close-box {
  &-btn {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1rpx solid rgba(204, 204, 204, 1);
    view {
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
    }
    view:nth-child(1) {
      border-right: 1rpx solid rgba(204, 204, 204, 1);
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;

      color: rgba(149, 151, 166, 1);
    }
    view:nth-child(2) {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(12, 212, 211, 1);
    }
  }
  &-title {
    padding: 90rpx 0;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(3, 3, 3, 1);
  }
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 540rpx;
  height: 310rpx;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 20rpx;
}
.btn {
  position: fixed;
  bottom: 116rpx;
  width: 100vw;
  display: flex;
  justify-content: center;
  button {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 88rpx;
    background: rgba(12, 212, 211, 1);
    opacity: 1;
    border-radius: 10rpx;
  }
}
.headImgSet {
  position: relative;
  background-color: #ffffff;
  height: 100vh;
  .txt {
    margin-left: 64rpx;
    margin-top: 22rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 32rpx;
    color: rgba(179, 179, 179, 1);
    width: 576rpx;
  }
  .title {
    padding: 20rpx 64rpx;
    padding-bottom: 0rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 38rpx;
    color: rgba(80, 80, 80, 1);
  }
  .box-img {
    position: relative;
    margin-top: 50rpx;
    margin-left: 64rpx;
    width: 624rpx;
    height: 624rpx;
    &-image {
      width: 100%;
      height: 100%;
    }
    .close {
      width: 64rpx;
      position: absolute;
      top: -32rpx;
      right: -32rpx;
    }
  }
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50rpx;
    margin-left: 64rpx;
    width: 624rpx;
    height: 328rpx;
    background: rgba(12, 212, 211, 0.2);
    border: 2rpx dashed rgba(12, 212, 211, 1);
    border-radius: 20rpx;
    &-upload {
      margin-top: 20rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 42rpx;
      color: rgba(12, 212, 211, 1);
    }
    &-image {
      width: 66rpx;
    }
  }
}
</style>
